<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滤镜函数实现美颜-小试牛刀</title>
    <style>
        canvas{
            border:1px solid #ccc;
        }
        #magnifier{
            position: absolute;
            transform: scale(2);
        }
    </style>
</head>
<body>
    <canvas width="0" height="0"></canvas>
    <canvas id="magnifier" width="0" height="0"></canvas>

    <script type="module">
        import { loadImg, getImageData } from "/review/common/lib/utils.js"

        const canvas = document.querySelector("canvas");
        const ctx = canvas.getContext("2d");

        const magnifierCanvas = document.getElementById("magnifier");
        const context = magnifierCanvas.getContext("2d");
        
        /**
         * 获取指定半径内的图片数据
         * @param {imageData} imageData 图片剪裁取数据
         * @param {number} radius 放大的半径
         * @param {number} x 坐标
         * @param {number} y 坐标
        */
        function getRadiusData(imageData, radius, x, y){
            const { width, height, data } = imageData;
            const newData = new Uint8ClampedArray(4 * (radius + 1) ** 2);
            const h = radius / 2;
            let offsetIn = 0;
            // 取值为以x、y为圆心的，边长为radius的正方形区域
            // 外圈循环为行遍历
            for (let i = -h; i <= h; i++) {
                const w = i + y;
                // 外圈循环为列遍历
                for (let j = -h; j <= h; j++) {
                    const hj = j + x;
                    const k = (w * width + hj) * 4;
                    const r = data[k],
                        g = data[k + 1],
                        b = data[k + 2],
                        a = data[k + 3];
                    
                    newData.set([r,g,b,a], offsetIn);
                    offsetIn += 4;
                }
            }
            
            const radiusData = new ImageData(newData,radius + 1 , radius + 1);
            return radiusData;
        }
        /**
         * 放大镜效果
         * @param {imageData} imageData 图片剪裁取数据
         * @param {number} radius 放大的半径
         * @param {number} x 坐标
         * @param {number} y 坐标
        */
        function magnifier(imageData, radius, x, y){
            const { width, height, data } = imageData;
            const { left, top } = canvas.getBoundingClientRect();
            magnifierCanvas.width = radius;
            magnifierCanvas.height = radius;

            const radiusData = getRadiusData(imageData, radius, x, y);
            context.putImageData(radiusData, 0, 0);

            magnifierCanvas.style.left = (left + x - radius/2) + "px";
            magnifierCanvas.style.top = (top + y - radius/2) + "px";

        }

        // 渲染
        (async function(){
            const img = await loadImg("./assets/girl1.jpg");
            const { width, height } = img;
            canvas.width = width;
            canvas.height = height;

            ctx.drawImage(img, 0, 0);
            
            // 获取像素点
            const imageData = getImageData(img);
            console.log(imageData)
            // ctx.putImageData(imageData, 0, 0);

            canvas.addEventListener("mousemove",(e)=>{
                const { left, top } = canvas.getBoundingClientRect();
                const offsetX = e.x - left;
                const offsetY = e.y - top;

                magnifier(imageData, 100, offsetX, offsetY);
            });
        })();

    </script>
</body>
</html>